<template>
  <div class="user">
    <div class="user_bg">
      <router-link tag="div" to="/personal_info" class="user_top">
        <div class="img">
          <img
            src="https://panqiu8-1309958500.cos.ap-guangzhou.myqcloud.com/images/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20221029101636.jpg"
            alt=""
          />
        </div>
        <div class="user_top_text">
          <p>{{ name }}</p>
          <p>个人主页<span class="iconfont icon-qianjin"></span></p>
        </div>
      </router-link>

      <div class="user_middle">
        <router-link tag="div" to="/follow" class="item">
          <p>{{ follow_lists.length }}</p>
          <p>关注</p>
        </router-link>
        <router-link tag="div" to="/recharge" class="item">
          <p>{{ coin }}</p>
          <p>虎币</p>
        </router-link>
        <router-link tag="div" to="/fans" class="item">
          <p>0</p>
          <p>粉丝</p>
        </router-link>
      </div>
    </div>
    <!-- <div class="user_bottom_item">
      <div class="img">
        <img src="../assets/img/u1.png" alt="" />
      </div>
      <p>我的背包</p>
    </div> -->
    <router-link tag="div" to="/news" class="user_bottom_item">
      <div class="img">
        <img src="../assets/img/u2.png" alt="" />
      </div>
      <p>消息中心</p>
    </router-link>
    <!-- <div class="user_bottom_item">
      <div class="img">
        <img src="../assets/img/u3.png" alt="" />
      </div>
      <p>我是房管</p>
    </div> -->
    <router-link tag="div" to="/feedback" class="user_bottom_item">
      <div class="img">
        <img src="../assets/img/u4.png" alt="" />
      </div>
      <p>我的反馈</p>
    </router-link>
    <div class="user_bottom_item">
      <div class="img">
        <img src="../assets/img/u5.png" alt="" />
      </div>
      <p class="long">邀请</p>
      <van-cell title="" @click="showShare = true" />
      <van-share-sheet
        v-model="showShare"
        title="立即分享给好友"
        :options="options"
      />
    </div>
    <!-- <div class="user_bottom_item">
      <div class="img">
        <img src="../assets/img/u6.png" alt="" />
      </div>
      <p>监察举报</p>
    </div> -->
    <router-link tag="div" to="/binding" class="user_bottom_item">
      <div class="img">
        <img src="../assets/img/u7.png" alt="" />
      </div>
      <p>帐号与绑定</p>
    </router-link>
    <router-link tag="div" to="/privacy" class="user_bottom_item">
      <div class="img">
        <img src="../assets/img/u8.png" alt="" />
      </div>
      <p>隐私政策</p>
    </router-link>
    <div class="user_bottom_item" @click="endlogin">
      <div class="img">
        <img src="../assets/img/u9.png" alt="" />
      </div>
      <p>退出登录</p>
    </div>

    <!-- 底部固定 -->
    <div class="home_bottom">
      <router-link tag="div" to="/home" class="home_bottom_item">
        <span class="iconfont icon-zhibo1"></span>
        <p>直播</p>
      </router-link>
      <router-link tag="div" to="/info" class="home_bottom_item">
        <span class="iconfont icon-zixun1"></span>
        <p>咨询</p>
      </router-link>
      <router-link tag="div" to="/follow" class="home_bottom_item">
        <span class="iconfont icon-guanzhu1"></span>
        <p>关注</p>
      </router-link>
      <router-link tag="div" to="/user" class="home_bottom_item con">
        <span class="iconfont icon-wode"></span>
        <p>我的</p>
      </router-link>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      follow_lists: null,
      coin: null,
      name: "中分背带裤",
      showShare: false,
      options: [
        [
          { name: "微信", icon: "wechat" },
          { name: "朋友圈", icon: "wechat-moments" },
          { name: "微博", icon: "weibo" },
          { name: "QQ", icon: "qq" },
        ],
        [
          { name: "复制链接", icon: "link" },
          { name: "分享海报", icon: "poster" },
          { name: "二维码", icon: "qrcode" },
          { name: "小程序码", icon: "weapp-qrcode" },
        ],
      ],
    };
  },
  methods: {
    endlogin() {
      window.localStorage.removeItem("token");
      this.$toast("退出登录");
      this.$router.push("/login");
    },
  },
  created() {
    if (!window.localStorage.name) {
      window.localStorage.setItem("name", "中分背带裤");
      window.localStorage.setItem("phone", "18211370484");
      window.localStorage.setItem("autograph", "你干嘛？？？");
      window.localStorage.setItem("wechat", "a1010507833");
      window.localStorage.setItem("qq", "390964050");
      window.localStorage.setItem("mailbox", "390964050@qq.com");
    }
    //获取关注的人数
    let follow_item = JSON.parse(window.localStorage.getItem("total"));
    this.follow_lists = follow_item.filter((item) => {
      return item.checked;
    });
    if (!window.localStorage.coin) {
      window.localStorage.setItem("coin", 0);
    }
    this.coin = window.localStorage.coin;
    this.name = window.localStorage.name;
  },
};
</script>

<style lang="scss" scoped>
.user_bg {
  background-color: #ffa200;
  .user_top {
    padding: 15px;
    display: flex;
    .img {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .user_top_text {
      margin-left: 10px;
      p {
        &:nth-child(1) {
          font-weight: 700;
          color: #ffffff;
          padding: 4px 0;
        }
        &:nth-child(2) {
          color: #ffffff;
          padding: 4px 0;
          font-size: 14px;
        }
      }
    }
  }
  .user_middle {
    display: flex;
    padding: 15px;
    justify-content: center;
    color: #ffffff;
    .item {
      width: 33.3%;
      display: flex;
      flex-direction: column;
      align-items: center;
      p {
        &:nth-child(1) {
          font-weight: 700;
          font-size: 24px;
          margin-bottom: 4px;
        }
        &:nth-child(2) {
          font-size: 16px;
        }
      }
    }
  }
}
.user_bottom_item {
  background-color: #ffffff;
  padding: 15px 0;
  margin: 0 15px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #cccccc;
  &:nth-child(7) {
    border-bottom: none;
  }
  .img {
    width: 40px;
    height: 40px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .long {
    width: 55px;
    text-align: right;
  }
}

// 底部固定
.home_bottom {
  display: flex;
  background-color: #ffffff;
  padding: 10px 0;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  .home_bottom_item {
    width: 25%;
    display: flex;
    flex-direction: column;
    align-items: center;
    span {
      font-size: 20px;
    }
    p {
      margin-top: 3px;
    }
    &.con {
      color: #ffa200;
    }
  }
}
</style>
